<template>
  <a-row>
    <a-col span="4">
      <a-card :bordered="true" :bodyStyle="{padding:'0'}">
        <a-row style="margin: 10px 10px 10px 10px">
          <a-input-search placeholder="搜索 手机号/姓名/订单号" v-model="queryParam.keyword" enter-button  @search="onSearch"/>
        </a-row>
        <a-row>
          <a-col span="23" align="right"><label>共 {{ total }} 条</label></a-col>
        </a-row>
        <div style="overflow-y: scroll;">
          <a-row style="height: 800px;">
            <a-list item-layout="horizontal" :data-source="dataSource">
              <div
                v-if="showLoadingMore"
                slot="loadMore"
                :style="{ textAlign: 'center', marginTop: '12px',marginBottom:'12px', height: '32px', lineHeight: '32px' }"
              >
                <a-spin v-if="loadingMore" />
                <a-button @click="onLoadMore" style="margin-bottom: 12px">
                  加载更多
                </a-button>
              </div>
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :bodyStyle="chooseId==item.id?bodyStyle1:bodyStyle0" :bordered="false" style="width:96%"
                        @click="handleChoosePatient(item)">
                  <a-row style="margin: 10px 10px 5px 20px">
                    <a-col span="12">
                      <label
                        :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;'">{{ item.realName
                        }}</label>
                    </a-col>
                    <a-col span="12" align="right">
                      <label
                        :style="chooseId==item.id?'margin-left: 14px;margin-right: 2px;color:white':'margin-left: 10px;margin-right: 2px;'">
                        {{ item.sexText }}&nbsp;&nbsp;{{ item.age }}岁
                      </label>
                    </a-col>
                  </a-row>
                  <a-row style="margin: 0px 10px 20px 20px">
                    <a-col span="12" align="left">
                      <label
                        :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;color:#959393'">{{ item.mobilePhone
                        }}</label>
                    </a-col>
                    <a-col span="12" align="right">
                      <label
                        :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;color:#959393'">{{ item.orderTypeText }}</label>
                    </a-col>
                  </a-row>
                </a-card>
              </a-list-item>
            </a-list>
          </a-row>
        </div>


      </a-card>

    </a-col>
    <a-col span="20">
      <a-card :bordered="false" :bodyStyle="{padding:'0'}">
        <a-button slot="extra" icon="add" style="margin-left: 10px" type="primary" @click="handleAdd">添加客户</a-button>
        <div style="overflow-y: scroll;">
          <a-row style="height: 875px;">
            <a-row style="margin-left: 40px;margin-top: 30px">
              <a-col span="2">
                <img style="width: 50px; height: 50px" src="../../assets/Oldimg.png" v-if='patientInfo.sexText=="女"'>
                <img style="width: 50px; height: 50px" src="../../assets/Oldimgboy.png" v-if='patientInfo.sexText=="男"'>
              </a-col>
              <a-col span="22">
                <a-row style="margin-left: 0px;margin-top: 10px">
                  <span class="mr333">{{ patientInfo.realName }}</span>
                  <span class="mr10">{{ patientInfo.sexText }}</span>
                  <span class="mr10">{{ patientInfo.age }}岁</span>
                  <span class="mr10">{{ patientInfo.mobilePhone }}</span>
                  <span class="mr10">编号：{{ patientInfo.archivesCode }}</span>
                </a-row>
              </a-col>
            </a-row>
            <a-row style="margin-left: 20px;margin-top: 20px;margin-right: 20px">
              <a-descriptions :column="4" bordered>
                <a-descriptions-item label="身高">
                  {{ patientInfo.height>0?(patientInfo.height/100)+"米":"" }}
                </a-descriptions-item>
                <a-descriptions-item label="体重">
                  {{ patientInfo.weight>0?patientInfo.weight+"kg":""}}
                </a-descriptions-item>
                <a-descriptions-item label="血型">
                  {{ patientInfo.bloodType }}
                </a-descriptions-item>
                <a-descriptions-item label="职业">

                </a-descriptions-item>
                <a-descriptions-item label="出生日期">
                  {{ patientInfo.birthday }}
                </a-descriptions-item>
                <a-descriptions-item label="民族">
                  {{ patientInfo.nationText }}
                </a-descriptions-item>
                <a-descriptions-item label="婚姻">
                  {{ patientInfo.izMarry }}
                </a-descriptions-item>
                <a-descriptions-item label="身份证">
                  {{patientInfo.cardNo}}
                </a-descriptions-item>
                <a-descriptions-item label="地址">
                  {{patientInfo.address}}
                </a-descriptions-item>
                <a-descriptions-item label="标签">
                  <a-tag color="blue" v-for="tag in tagList">
                    {{ tag }}
                  </a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </a-row>
            <a-row style="margin-left: 20px;margin-top: 20px">
              <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="基本信息">
                  <base-info-form :patientId="patientId"></base-info-form>
                </a-tab-pane>
                <a-tab-pane key="2" tab="心血管健康测评" force-render>
                  <test-info-form :patientId="patientId"></test-info-form>
                </a-tab-pane>
                <a-tab-pane key="3" tab="随防记录" force-render>
                  <follow-up-form :patientId="patientId"></follow-up-form>
                </a-tab-pane>
                <a-tab-pane key="4" tab="异常指标" force-render>
                  <exception-data-form :patientId="patientId"></exception-data-form>
                </a-tab-pane>
                <a-tab-pane key="5" tab="疾病风险评估" force-render>
                  <disease-record-form :patientId="patientId"></disease-record-form>
                </a-tab-pane>
                <a-tab-pane key="6" tab="动态健康数据" force-render>
                  <base-day-form :patientId="patientId"></base-day-form>
                </a-tab-pane>
                <a-tab-pane key="7" tab="签约医生" force-render>
                  <doctor-form :patientId="patientId"></doctor-form>
                </a-tab-pane>
              </a-tabs>
            </a-row>
          </a-row>
        </div>
      </a-card>
    </a-col>

   <h-his-patient-modal ref="modalForm" @ok="modalFormOk"></h-his-patient-modal>
  </a-row>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { deleteAction, getAction, httpAction, postAction } from '@api/manage'
import moment from 'moment'
import BaseInfoForm from './modules/BaseInfoForm'
import TestInfoForm from './modules/TestInfoForm'
import BaseDayForm from './modules/BaseDayForm'
import DoctorForm from './modules/DoctorForm'
import ExceptionDataForm from './modules/ExceptionDataForm'
import FollowUpForm from './modules/FollowUpForm'
import DiseaseRecordForm from './modules/DiseaseRecordForm'
import HHisPatientModal from './modules/HHisPatientModal'

export default {
  name: '客户画像页面',
  mixins: [mixinDevice, JeecgListMixin],
  components: {
    JDictSelectTag,
    BaseInfoForm,
    TestInfoForm,
    BaseDayForm,
    DoctorForm,
    ExceptionDataForm,
    FollowUpForm,
    DiseaseRecordForm,
    HHisPatientModal
  },
  data() {
    return {
      description: '客户画像页面',
      disableMixinCreated: true,
      visible: false,
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      bodyStyle0: { padding: '0', height: '65px', borderRadius: '8px', marginLeft: '2%' },
      bodyStyle1: { padding: '0', height: '65px', borderRadius: '8px', marginLeft: '2%', background: '#69c966' },
      chooseId: 0,
      url: {
        list: '/his/patient/list',
        get: '/his/patient',
        getTag: '/his/patient/tag'
      },
      pageNo: 1,
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
      dataSource: [],
      total: 0,
      patientInfo: {},
      tagList: [],
      patientId:0,
    }
  },
  created() {
    this.getData(true)
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    moment,
    handleChoosePatient(item) {
      if (this.chooseId == item.id) {
        this.chooseId = 0
        return
      }
      this.chooseId = item.id
      this.getInfo(item)
    },
    onSearch(){
      this.getData(true)
    },
    onLoadMore() {
      this.loadingMore = true
      this.showLoadingMore = false
      this.getData(false)
    },
    getData(isRefresh) {
      const that = this
      if (isRefresh) {
        that.pageNo = 1
      }
      that.queryParam.pageNo = this.pageNo
      that.queryParam.pageSize = 20
      getAction(that.url.list, that.queryParam).then((res) => {
        if (res.success) {
          that.dataSource = res.result.records
          if (that.dataSource && that.dataSource.length > 0 && isRefresh) {
            that.getInfo(that.dataSource[0])
          }
          if (res.result.totalPages > res.result.pageNo) {
            that.showLoadingMore = true
            that.pageNo++
          } else {
            that.showLoadingMore = false
          }
          that.total = res.result.total
        }
      }).finally(() => {
        this.loadingMore = false
      })
    },
    getInfo(record) {
      const that = this
      that.chooseId = record.id
      that.patientId=record.patientId;
      getAction(this.url.get + '/' + that.chooseId).then((res) => {
        if (res.success) {
          that.patientInfo = res.result
        }
      })

      getAction(this.url.getTag + '/' + that.chooseId).then((res) => {
        if (res.success) {
          that.tagList = res.result
        }
      })
    },
    getzHistoryData(memberId) {
      const that = this
      getAction(that.url.listHistory, { 'pageNo': 1, 'pageSize': 30, 'memberId': memberId }).then((res) => {
        if (res.success) {
          that.historyDataSource = res.result.records
        }
      }).finally(() => {

      })
    },
    handleSure() {
      const that = this
      postAction(this.url.sure, { id: that.chooseId }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.handleRefresh(that.chooseId)
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    handleRefresh(id) {
      const that = this
      getAction(that.url.get + '/' + id).then((res) => {
        if (res.success) {
          that.model = res.result
        }
      }).finally(() => {

      })
    },
    modalFormOk() {
      this.getData(true)
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.mr10{
  font-weight:500;
  color:#8b96a3;
  margin-right:30px;
  font-size:18px
}

.mr333{
  font-weight:500;
  color:#333;
  margin-right:30px;
  font-size:18px
}
</style>
